<template>
  <div class="table-box">
    <pro-table ref="proTableRef" row-key="id" :columns="columns" :request-api="getResourcePageApi" :init-param="initParam">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="Refresh" @click="handleSync">同步本地接口</el-button>
      </template>
    </pro-table>
  </div>
</template>

<script setup lang="ts">
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { ref, reactive } from "vue";
import { resourceMethodConst, resourceAuthorizedConst } from "@/utils/dict";
import { useHandleData } from "@/hooks/useHandleData";
import { syncLocalResourceApi, getResourcePageApi } from "@/api/modules/system/resource";
import ProTable from "@/components/ProTable/index.vue";

import Refresh from "~icons/ep/refresh";

defineOptions({
  name: "SystemResource"
});

/** 表格实例 */
const proTableRef = ref<ProTableInstance>();

/** 表单初始化参数 */
const initParam = reactive({ orderField: "controller,method,action", isAscending: true });
/** 表格配置项 */
const columns: ColumnProps[] = [
  { prop: "method", label: "请求方法", width: 100, tag: true, enum: resourceMethodConst, search: { el: "select" } },
  { prop: "isAuthorized", label: "允许匿名", width: 100, tag: true, enum: resourceAuthorizedConst, search: { el: "select" } },
  { prop: "route", label: "请求路由", align: "left", search: { el: "input" } },
  { prop: "description", label: "描述(说明)", align: "left" },
  { prop: "controller", label: "控制器", align: "left", search: { el: "input" } },
  { prop: "action", label: "函数方法", align: "left" }
];

/** 同步本地接口 */
const handleSync = () => {
  useHandleData(syncLocalResourceApi, {}, "同步").then(res => {
    if (res) proTableRef.value?.getTableList();
  });
};
</script>
